<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const config = getApp().globalData.config
	const statusHeight = ref(0)
	const menuHeight = ref(32)
	const agree = ref(false)
	const loading = ref(false)
	const buttonStyle = ref({
		background: 'rgba(0,0,0,0.4)',
		color: '#fff'
	})
	
	function backPage() {
		uni.navigateBack({
			fail: () => {
				uni.switchTab({url: '/pages/tabbar/index'})
			}
		})
	}
	function goLogin() {
		if(!agree.value) {
			uni.showToast({
				icon: 'none',
				title: '请阅读并同意《用户协议》和《隐私政策》'
			})
		}
	}
	function phoneLogin(e) {
		let phoneCode = e.code
		if(phoneCode) {
			uni.login({
				provider: 'weixin',
				success: (data) => {
					let openCode = data.code
					loading.value = true
					user.loginAction({social: {phoneCode, openCode}}).then(res => {
						user.getInfoAction().then(res => {
							loading.value = false
							uni.navigateBack()
						}).catch(() => loading.value = false)
					}).catch(() => loading.value = false)
				}
			})
		}
	}
	function msgLogin() {
		uni.navigateTo({ url: '/pages/loginMsg' })
	}
	function checkboxChange(e) {
		let values = e.detail.value || []
		agree.value = values.length > 0 && values[0]
	}
	function viewAgreement() {
		uni.navigateTo({
			url: '/pages/user/protocolConsumer'
		})
		// let site = config.appInfo.agreements[1]
		// uni.navigateTo({
		// 	url: `/pages/webview?title=${site.title}&url=${site.url}`
		// })
	}
	function viewPrivacy() {
		uni.navigateTo({
			url: '/pages/user/protocolPrivacy'
		})
		// let site = config.appInfo.agreements[0]
		// uni.navigateTo({
		// 	url: `/pages/webview?title=${site.title}&url=${site.url}`
		// })
	}
	
	onLoad(() => {
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		statusHeight.value = menuButtonInfo.top
		menuHeight.value = menuButtonInfo.height + 10
		// #endif
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head" :style="{height: menuHeight + 'px', top: statusHeight + 'px'}" @click="backPage">
			<uv-icon name="arrow-left" color="#000000" size="40" bold />
		</view>
		<view class="app-content">
			<view class="head">
				<image :src="config.appInfo.logo" class="icon" mode="aspectFill"></image>
				<text class="main-text">相宴</text>
				<text class="sub-text">智慧乡宴服务平台</text>
			</view>
			<view class="operate">
				<uv-button color="#FF3E49" shape="circle" size="large" text="本机号码一键登录" :open-type="agree? 'getPhoneNumber|agreePrivacyAuthorization' : ''" @getphonenumber="phoneLogin" @click="goLogin" :disabled="loading"></uv-button>
				<uv-button shape="circle" size="large" text="其他手机号登录" @click="msgLogin" :disabled="loading" :custom-style="buttonStyle"></uv-button>
			</view>
		</view>
		<view class="bottom">
			<checkbox-group @change="checkboxChange">
			    <label class="select"><checkbox color="#FF3E49" class='select-check' :checked="agree" value="true" /></label>
			</checkbox-group>
			<view class="agree-text">
				<text>我已阅读并同意</text>
				<text class="text-primary" @click.stop="viewAgreement">《用户协议》</text>
				<text>和</text>
				<text class="text-primary" @click.stop="viewPrivacy">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: 100vh;
		background-image: url('https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2024-12-12/1733993268957_loginBg.png');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 418rpx;
		.app-head{
			position: fixed;
			left: 0;
			z-index: 10;
			padding: 0 10rpx;
			display: flex;
			align-items: center;
		}
		.app-content{
			.head{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-weight: 600;
				letter-spacing: 4rpx;
				.icon{
					width: 176rpx;
					height: 176rpx;
					border-radius: 36rpx;
					background-color: #faf7f7;
				}
				.main-text{
					margin-top: 24rpx;
					line-height: 56rpx;
					font-size: 48rpx;
				}
				.sub-text{
					margin-top: 8rpx;
					line-height: 42rpx;
					font-size: 36rpx;
				}
			}
			.operate{
				padding: 220rpx 74rpx 0;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
			}
		}
		.bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 100rpx;
			padding: 0 74rpx;
			display: flex;
			align-items: center;
			gap: 6rpx;
			.select-check{
				transform: scale(0.6);
			}
			.agree-text{
				font-size: var(--theme-sm);
				color: #292929;
				.text-primary{
					color: #F92E1D;
				}
			}
		}
	}
</style>